<template>
  <div class="tab-filter" v-if="show">
    <div class="tag-box">
      <div
        class="item"
        v-for="(item,index) in tag"
        :key="index"
        :class="{'active':selectTag.includes(item.itemCode)}"
        @click="itemClick(item)"
      >{{item.itemName}}</div>
    </div>
    <div class="action-btn">
      <div class="reset" @click="reset">重置</div>
      <div class="submit" @click="submit">确定</div>
    </div>
  </div>
</template>

<script>
import commonService from 'SERVICE/commonService'
export default {
  props: {
    show: { type: Boolean, default: false },
    value: String
  },
  data() {
    return {
      tag: [],
      selectTag: []
    }
  },
  created() {
    this.getProjectTagList()
  },
  methods: {
    // 获取标签
    getProjectTagList() {
      commonService
        .getProjectTagList({})
        .then(res => {
          this.tag = res
        })
        .catch(err => {})
    },
    // 点击标签
    itemClick(item) {
      if (this.selectTag.includes(item.itemCode)) {
        let index = this.selectTag.findIndex(option => option == item.itemCode)
        return this.selectTag.splice(index, 1)
      }
      if (this.selectTag.length < 3) {
        this.selectTag.push(item.itemCode)
      } else {
        this.$toast({ duration: 2000, message: '标签最多只可选3个' })
      }
    },
    reset() {
      this.selectTag = []
    },
    submit() {
      let tag = this.selectTag.join(',')
      this.$emit('confirm', this.selectTag.length)
      this.$emit('input', tag)
    }
  }
}
</script>

<style lang="less" scoped>
.tab-filter {
  width: 100%;
  background-color: #fff;
  font-size: 12px;
  padding: 24px 16px;
  .tag-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      flex-basis: 76px;
      width: 76px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: rgba(242, 245, 249, 1);
      border-radius: 2px;
      color: #40516f;
      margin-bottom: 12px;
      &.active {
        background-color: #007ae6;
        color: #fff;
      }
    }
  }
  .action-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    .reset,
    .submit {
      width: 164px;
      height: 44px;
      text-align: center;
      line-height: 44px;
      font-size: 16px;
      color: #40516f;
      border-radius: 6px;
      background-color: #f2f8fe;
    }
    .submit {
      background-color: #007ae6;
      color: #fff;
    }
  }
}
</style>
